<template>
  <div>
    <MyHeader :background="'blue'" title="TabBar案例"></MyHeader>
    <div class="main">
      <!-- 组件切换-3.2.设置挂载点, 使用is属性来设置要显示哪个组件 -->
      <!-- <component :is="comName"></component> -->
      <!-- <router-link>123 </router-link> -->
      <router-view ></router-view>
    </div>
    <!-- 
      底部封装-1.1.把数组传入 MyTabBar 子组件中
      组件切换-3.3.给 MyTabBar 子组件添加自定义点击事件
     -->
    <MyTabBar :list="tabList"></MyTabBar>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader';
import MyTabBar from './components/MyTabBar.vue';
import MyGoodsList from './views/MyGoodsList.vue';
import MyGoodsSearch from './views/MyGoodsSearch.vue';
import MyUserInfo from './views/MyUserInfo.vue';
export default {
  components: {
    MyTabBar,
    MyHeader,
    MyGoodsList,
    MyGoodsSearch,
    MyUserInfo,
  },
  data() {
    return {
      // 组件切换-3.1.声明变量来承载要显示的"组件名"
      tabList: [
        {
          iconText: 'icon-shangpinliebiao',
          text: '商品列表',
          componentName: 'MyGoodsList',
        },
        {
          iconText: 'icon-sousuo',
          text: '商品搜索',
          componentName: 'MyGoodsSearch',
        },
        {
          iconText: 'icon-user',
          text: '我的信息',
          componentName: 'MyUserInfo',
        },
      ],
    };
  },
};
</script>

<style scoped>
.main {
  padding-top: 45px;
  padding-bottom: 51px;
}
</style>
